import "package:flutter/material.dart";

class NestedScrollViewPage extends StatelessWidget {
  const NestedScrollViewPage({super.key});
  @override
  Widget build(BuildContext context) {
    var sliverList = SliverList(
      delegate: SliverChildBuilderDelegate((_, index) {
        return ListTile(
          title: Text("$index"),
        );
      }, childCount: 10),
    );
    return Scaffold(
      appBar: AppBar(
        title: const Text('NestedScrollViewPage'),
      ),
      body: NestedScrollView(
        // NestedScrollView 在逻辑上将可滚动组件分为了 header 和 body 两部分，
        //header 部分我们可以认为是外部可滚动组件（outer scroll view），可以认为这个可滚动组件就是 CustomScrollView ，
        //所以它只能接收 Sliver，我们通过headerSliverBuilder 来构建一个 Sliver 列表给外部的可滚动组件；
        //而 body 部分可以接收任意的可滚动组件，该可滚动组件称为内部可滚动组件
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          // 返回一个 Sliver 数组给外部可滚动组件。
          return <Widget>[
            // 当用户向上滑动到顶部时，SliverAppBar 也会滑出可视窗口。
            //当用户反向滑动时，SliverAppBar 的 snap 为 true 时，此时无论 SliverAppBar 已经滑出屏幕多远，
            //都会立即回到屏幕顶部；但如果 snap 为 false，则 SliverAppBar 只有当向下滑到边界时才会重新回到屏幕顶部。
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                title: const Text('嵌套ListView'),
                floating: true,
                snap: true, // 当漂浮时，此参数才有效
                // pinned: true, // 固定在顶部
                forceElevated: innerBoxIsScrolled,
                expandedHeight: 200,
                flexibleSpace: FlexibleSpaceBar(
                  background: Image.asset(
                    "./images/1.jpg",
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ];
        },
        body: ListView(
          children: const [
            ListTile(
              title: Text('列表1'),
            ),
            ListTile(
              title: Text('列表2'),
            ),
            ListTile(
              title: Text('列表3'),
            ),
            ListTile(
              title: Text('列表4'),
            ),
            ListTile(
              title: Text('列表5'),
            ),
            ListTile(
              title: Text('列表6'),
            ),
            ListTile(
              title: Text('列表7'),
            ),
            ListTile(
              title: Text('列表8'),
            ),
            ListTile(
              title: Text('列表9'),
            ),
            ListTile(
              title: Text('列表10'),
            ),
            ListTile(
              title: Text('列表11'),
            ),
            ListTile(
              title: Text('列表12'),
            ),
            ListTile(
              title: Text('列表13'),
            ),
            ListTile(
              title: Text('列表14'),
            ),
            ListTile(
              title: Text('列表15'),
            ),
            ListTile(
              title: Text('列表16'),
            ),
          ],
        ),
      ),
    );
  }
}
